<script setup lang="ts">
    import {reactive} from 'vue'
    import Child1 from '../10-作用域插槽/Child1.vue'
</script>
<template>
    <h1>父组件-作用域插槽</h1>
    <div id="outer">
        <Child1>
            <!-- 插槽内容 -->
            <template v-slot="params">
                {{ params}}
                <ul>
                    <li v-for="b in params.book">{{ b }}</li>
                </ul>
            </template>
           
        </Child1>
        <Child1>
             <!-- 插槽内容 -->
             <template #default="{book}">
                <ol>
                    <li v-for="f in book">{{ f }}</li>
                </ol>
             </template>
             
        </Child1>
    </div>
</template>
<style scoped>
    #outer{
        width: 80%;
        margin: auto;
        height: 500px;
        border: 1px solid green;
        border-radius: 5px;
        display:flex
    }
</style>